<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="common/head.jsp"%>
<script src="/js/jquery-1.8.3.min.js"></script>
 <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>用户管理页面 >> 用户信息查看页面</span>
        </div>
     <style>
         select{
             width: 150px;
             text-align: center;
         }
     </style>
     <script>
         function role(){
             var roleId = $("#roleId").val();
             //阿贾克斯---------------------
             $.ajax({
                 type:"get", // 指定客户端向服务器端发送数据的方式
                 url:"doUser", // 向服务器请求的地址
                 data:{// 向服务器发送的数据
                     "roleId":$("#roleId").val()
                 },
                 async:true,// 是否为同步,true(默认值):异步 false:同步
                 success:function(user){// 服务器成功给予客户端响应的数据 out.print();
                     $("#userId").empty();
                     $("#address").empty();
                     $("#userId").append(
                         "<option value='0'>---请选择---</option>"
                     )
                     for (var i in (user)){
                         var u = user[i]  //先遍历出来数组
                         $("#userId").append(
                             "<option value='"+ u.userId +"'>---" + u.userName + "---</option>"
                         )
                     }
                 },
             });
             //---------------------
         }

         function address(){
             var userId = $("#user").val();
             //阿贾克斯---------------------
             $.ajax({
                 type:"get", // 指定客户端向服务器端发送数据的方式
                 url:"doAddress", // 向服务器请求的地址
                 data:{// 向服务器发送的数据
                     "userId":$("#userId").val()
                 },
                 async:true,// 是否为同步,true(默认值):异步 false:同步
                 success:function(address){// 服务器成功给予客户端响应的数据 out.print();
                     $("#address").empty();
                     $("#address").append(
                         "<option value='0'>---请选择---</option>"
                     )
                     for (var i in (address)){
                         var u = address[i]  //先遍历出来数组
                         $("#address").append(
                             "<option value='"+ u.id +"'>---" + u.addressDesc + "---</option>"
                         )
                     }
                 },
             });
             //---------------------
         }


     </script>
        <div class="providerView">
            <ul>
                <li>角色:
                    <select name="role" id="roleId" onblur="role()">
                        <c:forEach items="${requestScope.roleList}" var="role">
                            <option value="${role.roleId}">---${role.roleName}---</option>
                        </c:forEach>
                    </select>
                </li>
                <li>用户:
                    <select name="role" id="userId" onblur="address()">
                        <option value="0">---请选择---</option>
                    </select>
                </li>
                <li>地址:
                    <select name="role" id="address">
                        <option value="0">---请选择---</option>
                    </select>
                </li>
            </ul>
        </div>
    </div>
</section>
<%@include file="common/foot.jsp" %>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/userview.js"></script>